<template>
  <div class="easy-container-min flex" :ref="`comment-${comment.id}`">
    <router-link :to="`/users/${comment.author.id}`" target="_blank" class="shrink-0 m-r-10">
      <el-avatar :src="comment.author.avatar" size="small" />
    </router-link>
    <div class="flex-1">
      <div class="p-b-4">
        <span class="title link el-link--primary">{{ comment.author.nickname }}</span>
        <template v-if="comment.receiver && comment.receiver.id">
          回复
          <router-link
            :to="`/users/${comment.receiver.id}`"
            target="_blank" class="link el-link--primary"
            v-text="`@${comment.receiver.nickname}`"
          />
        </template>
        ：<div v-html="emojiFormat(comment.content)"></div>
      </div>
      <div class="info f-mini">
        <timeago2 :date-time="comment.created_at" class="m-r-16" />
        <span class="link info el-link--primary" @click="replyClick" >回复</span>
      </div>
    </div>
  </div>
</template>

<script>
import EmojiMixin from '@/components/emoji/emoji-mixin';

export default {
  name: 'comment-sub-item',
  mixins: [EmojiMixin],
  props: {
    comment: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    // 检测到这当前item时，定位到这里
    if (Number(this.$route.query.sub_comment_id) === this.comment.id) {
      this.$refs[`comment-${this.comment.id}`].scrollIntoView({ block: 'center' });
    }
  },
  methods: {
    // 点击回复
    replyClick() { this.$emit('replyClick', this.comment); },
  },

};
</script>

<style></style>
